﻿@page "/popconfirms"

<h3>Popconfirm 气泡确认框</h3>

<h4>点击元素，弹出气泡确认框。</h4>

<DemoBlock Title="基础用法" Introduction="<code>Popconfirm</code> 的属性与 <code>Popover</code> 很类似，因此对于重复属性，请参考 <a href='/popovers'><code>Popover</code><a> 的文档，在此文档中不做详尽解释。" Name="Normal">
    <div class="d-flex justify-content-center border p-3 rounded">
        <div class="d-flex flex-column w-100" style="height: 240px;">
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Bottom" ConfirmButtonColor="Color.Danger" Text="下面弹框" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right" Text="右侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left" Text="左侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top" Text="上面弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Content 更改确认弹窗显示文字" Introduction="通过设置<code>Content</code> 属性更改确认弹窗显示文字" Name="Content">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger" ConfirmButtonColor="Color.Danger" Text="删除确认按钮" Content="确定删除数据吗？" />
</DemoBlock>

<DemoBlock Title="异步确认" Introduction="通过设置<code>IsAsync</code> 属性点击确认按钮时异步进行数据提交" Name="IsAsync">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger"
                      ConfirmButtonColor="Color.Danger" Text="异步确认" Content="确定删除数据吗？" Icon="fa fa-fa fa-fw" IsAsync="true"
                      OnConfirm="OnAsyncConfirm" />
</DemoBlock>

<DemoBlock Title="表单提交" Introduction="通过设置<code>ButtonType</code> 属性值为 <code>ButtonType.Submit</code> 使确认确认按钮点击后进行异步表单数据提交" Name="Form">
    <ValidateForm Model="@Model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12">
                <PopConfirmButton Placement="Placement.Top" Color="Color.Primary" ConfirmIcon="fa fa-exclamation-triangle text-info"
                                  ConfirmButtonColor="Color.Success" Text="提交表单" Content="确定提交数据吗？" Icon="fa fa-save fa-fw"
                                  ButtonType="ButtonType.Submit" IsAsync="true" OnConfirm="OnAsyncSubmit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace1" class="mt-3" />
</DemoBlock>

<DemoBlock Title="超链接按钮" Introduction="通过设置<code>IsLink</code> 属性组件使用 <code>A</code> 标签进行渲染" Name="IsLink">
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa fa-exclamation-triangle text-danger"
                      ConfirmButtonColor="Color.Danger" Text="我是超链接" Content="确定删除数据吗？" IsLink="true" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
